<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery.js"></script>
    <title>郑州市气象数据分析系统</title>
    <link rel="stylesheet" href="css/comon0.css">
</head>
<script>
    // 全局错误处理
    window.addEventListener('error', function(e) {
        // 忽略第三方脚本错误
        if (e.filename && (
            e.filename.includes('aegisInject') ||
            e.filename.includes('stadium.js') ||
            e.filename.includes('content_scripts')
        )) {
            e.preventDefault();
            console.log('忽略第三方脚本错误:', e.message);
            return false;
        }
    });
</script>
<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    })
    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})
        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({fontSize: whei / 20})
        });
    });
</script>
<body>
<div class="loading">
    <div class="loadbox"><img src="images/loading.gif"> 页面加载中...</div>
</div>
<div class="head">
    <h1>郑州市气象数据分析系统</h1>
    <div class="weather">
        <span id="showTime"></span>
        <div class="date-picker">
            <label for="weatherDate">选择日期: </label>
            <input type="date" id="weatherDate" >
        </div>
    </div>

    <script>
        var t = null;
        t = setTimeout(time, 1000);//開始运行
        function time() {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();//获取时
            var m = dt.getMinutes();//获取分
            var s = dt.getSeconds();//获取秒
            document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>

</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">风况</div>
                <div class="allnav" id="echart1"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">气压</div>
                <div class="allnav" id="echart2"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">生活建议小卡片</div>
                <div class="allnav" id="echart3"></div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="bar">
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left text_style">极端天气统计</li>
                    </ul>
                </div>
                <div class="barbox">
                    <ul class="clearfix">
                        <li class="pulll_left counter" id="highTempCount">24</li>
                        <li class="pulll_left counter" id="stormCount">36</li>
                    </ul>
                </div>
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left">高温热浪</li>
                        <li class="pulll_left">暴雨洪涝</li>
                    </ul>
                </div>
            </div>
            <div class="bar">
                <div class="barbox">
                    <ul class="clearfix">
                        <li class="pulll_left counter" id="windyCount">32</li>
                        <li class="pulll_left counter" id="hazeCount">20</li>
                    </ul>
                </div>
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left">大风日数</li>
                        <li class="pulll_left">雾霾日数</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div class="map1"><img src="images/lbx.png"></div>
                <div class="map2"><img src="images/jt.png"></div>
                <div class="map3"><img src="images/map.png"></div>
                <div class="map4" id="map_1"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height:3.4rem">
                <div class="alltitle">温度</div>
                <div class="allnav" id="echart4"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">降水</div>
                <div class="allnav" id="echart5"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3rem">
                <div class="alltitle">云与能见度</div>
                <div class="allnav" id="echart6"></div>
                <div class="boxfoot"></div>
            </div>
        </li>
    </ul>
</div>
<script>
    // 页面加载完成后获取数据
    document.addEventListener('DOMContentLoaded', function () {
        fetch('/daily/temp')
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok');
                return response.json();
            })
            .then(data => {
                document.getElementById('highTempCount').textContent = data.highTempCount;
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('highTempCount').textContent = '--';
            });
        fetch('/daily/type')
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok');
                return response.json();
            })
            .then(data => {
                document.getElementById('hazeCount').textContent = data.type8Count + data.type9Count;
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('hazeCount').textContent = '--';
            });
        fetch('/hourly/stormDays')
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok');
                return response.json();
            })
            .then(data => {
                document.getElementById('stormCount').textContent = data;
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('stormCount').textContent = '--';
            });
        fetch('/hourly/windyDays')
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok');
                return response.json();
            })
            .then(data => {
                document.getElementById('windyCount').textContent = data;
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('windyCount').textContent = '--';
            });
    });
</script>
<div class="back"></div>
</body>

<script src="js/dataManager.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/js.js"></script>
<script type="text/javascript" src="js/area_echarts.js"></script>
</html>
